<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonDataTable" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <!--<template slot="table_dialog" slot-scope="scope">-->
      <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
      <!--</template>-->
      <el-table-column label="操作" width="80">
        <template slot-scope="a">
          <el-button type="text" @click="dialogFormVisible=true">查询</el-button>
        </template>
      </el-table-column>
    </generate-table>
    <el-dialog :visible.sync="dialogFormVisible">
      <slot :data="temp" form="dataForm" name="table_dialog">
        <generate-form ref="generateForm" :data="jsonDataQuery" :remote="remoteFuncs" :value="editData" />
        <generate-table ref="generateTable" :data="jsonAccountStatement" :remote="remoteFuncs" :value="editData">
          <!--自定义新增编辑页面内容-->
          <!--<template slot="table_dialog" slot-scope="scope">-->
          <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
          <!--</template>-->
        </generate-table>
      </slot>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="dialogFormVisible = false ">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      temp: '',
      dialogFormVisible: false,
      jsonData:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '开户行',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'OpenBank'
                      },
                      'key': '1541656458000_32453',
                      'model': 'select_1541656458000_32453',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '公司代码',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541656482000_6135'
                      },
                      'key': '1541656482000_6135',
                      'model': 'input_1541656482000_6135',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541656453000_92404'
              },
              'key': '1541656453000_92404',
              'model': 'grid_1541656453000_92404',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      jsonDataTable: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '公司代码',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541647830000_47958'
                    },
                    'key': '1541647830000_47958',
                    'model': 'input_1541647830000_47958',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '公司代码格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'select',
                    'name': '开户行',
                    'icon': 'regular/caret-square-down',
                    'options': {
                      'defaultValue': '',
                      'multiple': false,
                      'disabled': false,
                      'clearable': false,
                      'placeholder': '',
                      'required': false,
                      'showLabel': false,
                      'width': '100%',
                      'options': [
                        {
                          'value': '下拉框1'
                        },
                        {
                          'value': '下拉框2'
                        },
                        {
                          'value': '下拉框3'
                        }
                      ],
                      'remote': true,
                      'remoteOptions': [],
                      'props': {
                        'value': 'value',
                        'label': 'label'
                      },
                      'remoteFunc': 'OpenBank'
                    },
                    'key': '1541647859000_68500',
                    'model': 'select_1541647859000_68500',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541647826000_343'
            },
            'key': '1541647826000_343',
            'model': 'grid_1541647826000_343',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '账号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'number',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541647883000_86860'
                    },
                    'key': '1541647883000_86860',
                    'model': 'input_1541647883000_86860',
                    'rules': [
                      {
                        'type': 'number',
                        'message': '账号格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'select',
                    'name': '币种',
                    'icon': 'regular/caret-square-down',
                    'options': {
                      'defaultValue': '',
                      'multiple': false,
                      'disabled': false,
                      'clearable': false,
                      'placeholder': '',
                      'required': false,
                      'showLabel': false,
                      'width': '100%',
                      'options': [
                        {
                          'value': '下拉框1'
                        },
                        {
                          'value': '下拉框2'
                        },
                        {
                          'value': '下拉框3'
                        }
                      ],
                      'remote': true,
                      'remoteOptions': [],
                      'props': {
                        'value': 'value',
                        'label': 'label'
                      },
                      'remoteFunc': 'Currency'
                    },
                    'key': '1541647904000_6764',
                    'model': 'select_1541647904000_6764',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541647876000_13380'
            },
            'key': '1541647876000_13380',
            'model': 'grid_1541647876000_13380',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '描述',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541647954000_86798'
                    },
                    'key': '1541647954000_86798',
                    'model': 'input_1541647954000_86798',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '开户单位',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541647961000_75208'
                    },
                    'key': '1541647961000_75208',
                    'model': 'input_1541647961000_75208',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541647946000_27001'
            },
            'key': '1541647946000_27001',
            'model': 'grid_1541647946000_27001',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      jsonDataQuery: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '开始日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1541657840000_66787'
                    },
                    'key': '1541657840000_66787',
                    'model': 'date_1541657840000_66787',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '结束日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1541657846000_23191'
                    },
                    'key': '1541657846000_23191',
                    'model': 'date_1541657846000_23191',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541657838000_29408'
            },
            'key': '1541657838000_29408',
            'model': 'grid_1541657838000_29408',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      jsonAccountStatement: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1541658103000_14041'
                    },
                    'key': '1541658103000_14041',
                    'model': 'date_1541658103000_14041',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '凭证号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541658112000_42749'
                    },
                    'key': '1541658112000_42749',
                    'model': 'input_1541658112000_42749',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541658099000_66305'
            },
            'key': '1541658099000_66305',
            'model': 'grid_1541658099000_66305',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '摘要',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541658121000_51347'
                    },
                    'key': '1541658121000_51347',
                    'model': 'input_1541658121000_51347',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '借方',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541658129000_11824'
                    },
                    'key': '1541658129000_11824',
                    'model': 'input_1541658129000_11824',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541658117000_23595'
            },
            'key': '1541658117000_23595',
            'model': 'grid_1541658117000_23595',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '贷方',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541658147000_97546'
                    },
                    'key': '1541658147000_97546',
                    'model': 'input_1541658147000_97546',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'select',
                    'name': '方向',
                    'icon': 'regular/caret-square-down',
                    'options': {
                      'defaultValue': '',
                      'multiple': false,
                      'disabled': false,
                      'clearable': false,
                      'placeholder': '',
                      'required': false,
                      'showLabel': false,
                      'width': '100%',
                      'options': [
                        {
                          'value': '下拉框1'
                        },
                        {
                          'value': '下拉框2'
                        },
                        {
                          'value': '下拉框3'
                        }
                      ],
                      'remote': true,
                      'remoteOptions': [],
                      'props': {
                        'value': 'value',
                        'label': 'label'
                      },
                      'remoteFunc': 'Direction'
                    },
                    'key': '1541658168000_75059',
                    'model': 'select_1541658168000_75059',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541658142000_47973'
            },
            'key': '1541658142000_47973',
            'model': 'grid_1541658142000_47973',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '余额',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541658206000_43723'
                    },
                    'key': '1541658206000_43723',
                    'model': 'input_1541658206000_43723',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': []
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541658204000_60820'
            },
            'key': '1541658204000_60820',
            'model': 'grid_1541658204000_60820',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {

        OpenBank(resolve) {
          // 开户行 select_1541647859000_68500
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('开户行').then(response => { resolve(response.data) })
        },

        Currency(resolve) {
          // 币种 select_1541647904000_6764
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('币种').then(response => { resolve(response.data) })
        },
        Direction(resolve) {
          // 方向 select_1541658168000_75059
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('方向').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
